<template>
  <div class="kb-progress">
    <div class="kb-progress-header">
      <div>{{ title }}</div>
      <div>{{ percentage }}%</div>
    </div>
    <div class="kb-progress-main">
      <div class="kb-progress-bar" :style="{width: `${percentage}%`}"></div>
      <div class="kb-progress-decoration" :style="{left: `${percentage}%`}"></div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    percentage: {
      type: Number,
      default: 0
    }
  }
}
</script>
<style lang="scss" scoped>
.kb-progress {
  font-size: tvw(14);
  color: #ffffff;
  margin-bottom: tvh(10);
  .kb-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: tvh(4);
  }
  .kb-progress-main {
    position: relative;
    background: rgba(196, 196, 196, 0.3);
    height: tvh(8);
    .kb-progress-bar {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      background: linear-gradient(90deg, rgba(24, 130, 255, 1) 0%, rgba(54, 235, 202, 1) 100%);
    }
    .kb-progress-decoration {
      position: absolute;
      top: tvh(-3);
      left: 0;
      height: tvh(14);
      width: tvw(2);
      background: #ffffff;
    }
  }
}
</style>